<!-- 
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">

  {{#if (eq data.themeSettings.logoType "text")}}
  <h5 class="my-0 mr-md-auto font-weight-normal">{{ data.themeSettings.logoTitle }}</h5>
  {{/if}}

  {{#if (eq data.themeSettings.logoType "image")}}
  <div style="{{ data.themeSettings.imageStyle}}" class="mr-md-auto">
    <img src="/assets/uploads/{{ data.themeSettings.fileName}}" alt=""
      width="{{ data.themeSettings.imageWidth}}">
  </div>
  {{/if}}

  <nav class="my-2 my-md-0 mr-md-3">

    <ul class="nav justify-content-end">
      {{#each data.menu}}
      <li class="nav-item {{#if this.isActive}}active{{/if}} {{#if this.showChildren}}dropdown{{/if}}">
        <a class="nav-link {{#if this.showChildren}}dropdown-toggle{{/if}}" href="{{this.data.url}}"
          {{#if this.showChildren}}data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{/if}}>
          {{this.data.title}}
          <span class="sr-only">(current)</span></a>

        {{#if this.showChildren}}
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          {{#each this.children}}
          <a class="dropdown-item" href="{{this.data.url}}">{{this.data.title}}</a>
          {{/each}}
        </div>
        {{/if}}
      </li>
      {{/each}}
      </li>
    </ul>
    </ul>
  </nav>
  <a class="btn btn-outline-primary" href="/login">Login 4</a>&nbsp;
  <a class="btn btn-outline-primary" href="/register">Sign up</a>
</div> -->

  
<nav class="st-nav navbar main-nav navigation fixed-top" id="main-nav">

  {{> menu-github }}

  <div class="container">
    <ul class="st-nav-menu nav navbar-nav">
      <li class="st-nav-section nav-item">
        <a href="/" class="navbar-brand">
          <img
            src="{{ data.themeSettings.fileNameDark.src }}"
            width="{{ data.themeSettings.imageWidth }}"
            alt="SoncisJs Node CMS"
            class="logo logo-sticky d-block d-md-none"
          />
          <img
            src="{{ data.themeSettings.fileName.src }}"
            width="{{ data.themeSettings.imageWidth }}"
            alt="SoncisJs Node CMS"
            class="logo d-none d-md-block"
          />
        </a>
      </li>

      <li class="st-nav-section st-nav-primary nav-item">
        {{#each data.menu}}
        <a class="st-root-link {{#if this.showChildren}}st-has-dropdown{{/if}} nav-link" data-dropdown="{{ this.data.title }}" href="{{ this.data.url }}"
          >{{ this.data.title }}
        </a>
        {{/each}}
        <!-- <a
          class="st-root-link item-products st-has-dropdown nav-link"
          data-dropdown="blocks"
          >Blocks 3333
        </a> -->
        <!-- <a
          class="st-root-link item-products st-has-dropdown nav-link"
          data-dropdown="pages"
          >Pages </a
        ><a
          class="st-root-link item-company st-has-dropdown nav-link"
          data-dropdown="components"
          >UI Components </a
        ><a
          class="st-root-link item-blog st-has-dropdown nav-link"
          data-dropdown="blog"
          >Blog </a
        ><a
          class="st-root-link item-shop st-has-dropdown nav-link"
          href="shop/"
          data-dropdown="shop"
          >Shop</a
        > -->
      </li>

      <!-- <li class="st-nav-section st-nav-secondary nav-item">
        <a class="btn btn-rounded btn-outline mr-3 px-3" href="/login"
          ><i class="fas fa-sign-in-alt d-none d-md-inline mr-md-0 mr-lg-2"></i>
          <span class="d-md-none d-lg-inline">Login</span> </a
        ><a class="btn btn-rounded btn-solid px-3" href="/register"
          ><i class="fas fa-user-plus d-none d-md-inline mr-md-0 mr-lg-2"></i>
          <span class="d-md-none d-lg-inline">Signup</span></a
        >
      </li> -->
      <!-- Mobile Navigation -->
      <li class="st-nav-section st-nav-mobile nav-item">
        <button class="st-root-link navbar-toggler" type="button">
          <span class="icon-bar"></span> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="st-popup">
          <div class="st-popup-container">
            <a class="st-popup-close-button">Close</a>
            <div class="st-dropdown-content-group">
              <h4 class="text-uppercase regular">Pages</h4>
              {{#each data.menu}}

              <a class="regular text-primary" href="{{ this.data.url }}">
                <i class="bi bi-chevron-right mr-2"></i> {{ this.data.title }} </a>
                {{/each}}
              <!-- <a class="regular text-primary" href="about.html"
                ><i class="far fa-building mr-2"></i> About </a
              ><a class="regular text-success" href="contact.html"
                ><i class="far fa-envelope mr-2"></i> Contact </a
              ><a class="regular text-warning" href="pricing.html"
                ><i class="fas fa-hand-holding-usd mr-2"></i> Pricing </a
              ><a class="regular text-info" href="faqs.html"
                ><i class="far fa-question-circle mr-2"></i> FAQs</a
              > -->
            </div>
            <!-- <div class="st-dropdown-content-group border-top bw-2">
              <h4 class="text-uppercase regular">Components</h4>
              <div class="row">
                <div class="col mr-4">
                  <a target="_blank" href="components/alert.html">Alerts</a>
                  <a target="_blank" href="components/badge.html">Badges</a>
                  <a target="_blank" href="components/button.html">Buttons</a>
                  <a target="_blank" href="components/color.html">Colors</a>
                  <a target="_blank" href="components/accordion.html"
                    >Accordion</a
                  >
                  <a target="_blank" href="components/cookie-law.html"
                    >Cookielaw</a
                  >
                </div>
                <div class="col mr-4">
                  <a target="_blank" href="components/overlay.html">Overlay</a>
                  <a target="_blank" href="components/progress.html"
                    >Progress</a
                  >
                  <a target="_blank" href="components/lightbox.html"
                    >Lightbox</a
                  >
                  <a target="_blank" href="components/tab.html">Tabs</a>
                  <a target="_blank" href="components/tables.html">Tables</a>
                  <a target="_blank" href="components/typography.html"
                    >Typography</a
                  >
                </div>
              </div>
            </div> -->
            <!-- <div class="st-dropdown-content-group bg-light b-t">
              <a href="login.html"
                >Sign in <i class="fas fa-arrow-right"></i
              ></a>
            </div> -->
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>
